import { useState,useEffect } from "react"

export const useDebounce=(val:string,delay:number)=>{
    // state 应该是响应式的，当值变化时，页面也跟着更新
    const [debounceVal,setDebounceVal]=useState(val)

    useEffect(() => {
        // 每次改变
        let timeout=setTimeout(()=>{
            setDebounceVal(val)
        },delay)
        // 当有依赖项时，每次依赖项改变都会执行return 中的function
        // 组件卸载时也会执行
        return () => {
            clearTimeout(timeout)
        }
    }, [val])
    return debounceVal
}


